<template>
	<view>
		<z-header>乐库</z-header>
		<sticker :scrollTop="scrollTop" :styleTop="$systemInfo.navHeight">
			<view class="category-wraper">
				<scroll-view class="category-scroll-x" scroll-x>
					<view class="web-font-thin items">
						<view
							class="item" v-for="(v,i) in categories"
							:key="i"
							:data-active="currentCate===i"
							@click="onCateClickHandle(i)">
							<text class="txt">{{v.name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</sticker>
		<playlist :items="list"></playlist>
		<loading-modal v-model="showLoading"></loading-modal>
		<loading-foot :status="footLoadStatus"></loading-foot>
	</view>
</template>

<script>
	import playlist from '@/pages/play/playlist'
	import sticker from '@/components/navigation/sticker'
	export default {
		components:{playlist, sticker},
		mounted() {
			setTimeout(()=>{
				this.footLoadStatus = 'loaded'
			}, 5000)
		},
		data() {
			return {
				showLoading: false,
				footLoadStatus: 'loading',
				currentCate: 0,
				categories: [
					{_id:0, name:'所有'},
					{_id:1, name:'有声读物'},
					{_id:2, name:'独立读物'},
					{_id:3, name:'独立音乐'},
					{_id:4, name:'流行音乐'}
				],
				list: [
					{_id:'1', name:'Concerning Hobbits', previewImg:'/static/play/item-bg-1.jpg', avatarUrl:'/static/avatar1.jpg', likeCount:'22, 033', liked: false, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'00:20:23'},
					{_id:'2', name:'如何做自我清理',previewImg:'/static/play/item-bg-2.jpg', avatarUrl:'/static/avatar2.jpg', likeCount:'22, 033', liked: true, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'00:12:23'},
					{_id:'3', name:'Firestone2 Concerning Hobbits',previewImg:'/static/play/item-bg-3.jpg', avatarUrl:'/static/avatar3.jpg', likeCount:'22, 033', liked: true, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'00:32:43'},
					{_id:'4', name:'Firestone3',previewImg:'/static/play/item-bg-1.jpg', avatarUrl:'/static/avatar1.jpg', likeCount:'22, 033', liked: true, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'00:05:09'},
					{_id:'5', name:'Firestone4',previewImg:'/static/play/item-bg-2.jpg', avatarUrl:'/static/avatar2.jpg', likeCount:'22, 033', liked: true, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'01:00:23'},
					{_id:'6', name:'Firestone5',previewImg:'/static/play/item-bg-3.jpg', avatarUrl:'/static/avatar3.jpg', likeCount:'22, 033', liked: true, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'00:45:07'},
					{_id:'7', name:'Concerning Hobbits', previewImg:'/static/play/item-bg-1.jpg', avatarUrl:'/static/avatar1.jpg', likeCount:'22, 033', liked: false, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'00:20:23'},
					{_id:'8', name:'如何做自我清理',previewImg:'/static/play/item-bg-2.jpg', avatarUrl:'/static/avatar2.jpg', likeCount:'22, 033', liked: true, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'00:12:23'},
					{_id:'9', name:'Firestone2 Concerning Hobbits',previewImg:'/static/play/item-bg-3.jpg', avatarUrl:'/static/avatar3.jpg', likeCount:'22, 033', liked: true, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'00:32:43'},
					{_id:'10', name:'Firestone3',previewImg:'/static/play/item-bg-1.jpg', avatarUrl:'/static/avatar1.jpg', likeCount:'22, 033', liked: true, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'00:05:09'},
					{_id:'11', name:'Firestone4',previewImg:'/static/play/item-bg-2.jpg', avatarUrl:'/static/avatar2.jpg', likeCount:'22, 033', liked: true, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'01:00:23'},
					{_id:'12', name:'Firestone5',previewImg:'/static/play/item-bg-3.jpg', avatarUrl:'/static/avatar3.jpg', likeCount:'22, 033', liked: true, author: 'author1', audio:'/static/temp/Concerning Hobbits.mp3', duration:'00:45:07'}
				],
				scrollTop: 0
			}
		},
		methods: {
			onCateClickHandle(i){
				this.currentCate = i
				this.showLoading = true
				setTimeout(()=>{
					this.showLoading = false
					this.list.push(...this.list.splice(0,1))
				}, 1000)
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		}
	}
</script>

<style lang="scss">
.category-scroll-x{
	white-space: nowrap;
	.items{
		display: flex;
		padding: 0 20upx;
		background: $primary-color;
	}
	[data-active="true"] .txt{
		opacity: 1;
		border-bottom: solid 4upx rgba(255,255,255,0.4);
	}
	.txt{
		display: block;
		padding: 30upx 0 20upx;
		margin: 0 40upx;
		opacity: 0.5;
	}
}
</style>
